import { useEffect ,useState} from 'react';
import Taro, { switchTab } from '@tarojs/taro';
import { Request, getGlobalData} from '../util';
import Styles from './index.module.less'; 
import {connect} from 'react-redux';
function index(props){
    
    const domain = getGlobalData('domain');
    const [tabBarList, setTabBarList] = useState([]);   

    //获取tabbar信息
    useEffect(()=>{
        Request(domain+"/client/image/getTabBar").then((res)=>{
            setTabBarList(()=>{
                return res.data.data;
            });
        });
    },[])

    return (
        <view className={Styles.tabbar}>
            {
                tabBarList.map((item)=>{
                    return (
                        <view className={Styles.item} onClick={()=>{
                            switchTab({
                                url:item.page_path
                            })
                        }}>
                            <image src= {props.tabBarID === item.id ? item.url_1: item.url_2}/>
                            <view className={Styles.name} style={{color:props.tabBarID === item.id ?"#c8aaa9":"#bfbfbf"
                        }}>{item.name}</view>
                        </view>
                    )
                })
            }
        </view>
    )
}

const mapStateToProps = (state) => {
    return state;
}

export default connect(mapStateToProps)(index)